<!Doctype>
<style>*{margin:0px;padding:0px;}</style>
<script type="text/javascript">
	function DisplayCurrentScroll() {
		var div = document.getElementById ("scrollDiv");
		var info = document.getElementById ("info");
		info.rows[1].cells[4].innerHTML = div.scrollLeft;
		info.rows[2].cells[4].innerHTML = div.scrollTop;
		//alert(window.scrollX);
	}
	function DisplayInfo () {
		var div = document.getElementById ("scrollDiv");
		var info = document.getElementById ("info");
		info.rows[1].cells[1].innerHTML = div.scrollWidth;
		info.rows[2].cells[1].innerHTML = div.scrollHeight;
		info.rows[1].cells[2].innerHTML = div.clientWidth;
		info.rows[2].cells[2].innerHTML = div.clientHeight;
		info.rows[1].cells[3].innerHTML = div.scrollWidth - div.clientWidth;
		info.rows[2].cells[3].innerHTML = div.scrollHeight - div.clientHeight;
		//div.scrollLeft=1200;
	}
</script>
<body onload="DisplayInfo()">
    <div id="scrollDiv" style="width:200px;height:200px; overflow:auto;" onscroll="DisplayCurrentScroll()">
        <div style="height:800px; width:2000px; background-color:#a08080;"></div>
    </div>
    <br /><br />
    <table id="info" border="1px">
        <thead>
            <tr>
                <th></th>
                <th>Total size</th>
                <th>Client size</th>
                <th>Max scroll position</th>
                <th>Current scroll position</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><b>Horizontal</b></td>
                <td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td><b>Vertical</b></td>
                <td></td><td></td><td></td><td></td>
            </tr>
        </tbody>
    </table>
</body>